<template>
  <div class="login">
    <div class="logintop"></div>
    <div class="loginmain">
      <div class="loginmainl">

        <div class="loginmainltop">
          <div class="loginicon"><img src="../assets/images/lohinicon.png" alt=""></div>
          <div class="logintitle">中医药健康文化传播协同服务平台</div>
        </div>
        <div class="logintype">
          <div class="logiintypeitem" :class="{ 'active': active == item.id }" v-for="(item, index) in navlist"
            :key="index" @click="changetype(item)">
            {{ item.name }}
          </div>
        </div>

        <div class="xinxi" v-if="active == 1">
          <el-form  label-position="left" label-width="100px" ref="loginFormm" :model="loginFormm" :rules="loginRuless" class="login-form">
            <el-form-item prop="phoneNumber" label="手机号码:">
              <el-input v-model="loginFormm.phoneNumber" type="text" auto-complete="off" placeholder="手机号">
              </el-input>
            </el-form-item>
            <el-form-item prop="code" label="验证码:" v-if="captchaEnabled" >
        <el-input
          v-model="loginFormm.code"
          auto-complete="off"
          placeholder="图形验证码"
          style="width: 55%"
          @keyup.enter.native="handleLogin"
        >
        </el-input>
        <div class="login-code">
          <img style="margin-left: -20px;width: 112px;" :src="codeUrl" @click="getCode" class="login-code-img"/>
        </div>
      </el-form-item>
            <el-form-item prop="smsCode" label="验证码:">
              <el-input v-model="loginFormm.smsCode" auto-complete="off" placeholder="验证码" style="width: 55%"
                @keyup.enter.native="handleLoginn">
              </el-input>
              <div class="login-code">
                <el-button @click.native.prevent="getSmsCode" type="primary"
                  style="background-color: #3D7EFF;border-color: #3D7EFF;margin-left: -20px;">{{ computeTime > 0 ?
                     ` ${computeTime}s 已发送` :
                    '获取验证码' }}</el-button>
              </div>
            </el-form-item>
 
          
       
          </el-form>
          <div style="width:90%;margin: 0 auto;">
              <el-button :loading="loadingg" size="medium" type="primary"
                style="width:100%;background-color: #D5A771;border-color: #D5A771;" @click.native.prevent="handleLoginn">
                <span v-if="!loadingg">提交信息</span>
                <span v-else>提 交 中 ...</span>
              </el-button>
              <div style="font-size: 12px;
font-family: Source Han Sans, Source Han Sans;
font-weight: 400;
color: #999999;
line-height: 60px;width: 100%;text-align: center;">
                郑州丰泰思科通信技术有限公司 现ICP备15010994号-2
              </div>
            </div>
        </div>
      </div>

      <div class="loginmainr">
        <div class="loginmainrtop">
          —— 大力弘扬中医药传统文化，传承精华，守正创新 ——
        </div>
        <div class="jielist">
          <div class="jieitem">
            <div class="jieitemtitle">
              普通用户
            </div>
            <div class="jieitemerji">
              通过平台将浏览、分享、收藏，下载资源中医药科普内容。
            </div>
            <div class="iteminfo">
              <div class="itemmm">
                <div class="iteminfoicon"></div>
                <div class="iteminfoname">浏览、分享、收藏</div>
              </div>
              <div class="itemmm">
                <div class="iteminfoicon"></div>
                <div class="iteminfoname">下载资源</div>
              </div>
            </div>
          </div>
          <div class="jieitem">
            <div class="jieitemtitle">
              新媒体
            </div>
            <div class="jieitemerji">
              可以对平台所创作的内容进行浏览.分享、收藏、下载，可以通过第三方渠道推广科普内容，同时也可以发布内容创作需求。
            </div>
            <div class="iteminfo">
              <div class="itemmm">
                <div class="iteminfoicon"></div>
                <div class="iteminfoname">浏览、分享、收藏</div>
              </div>
              <div class="itemmm">
                <div class="iteminfoicon"></div>
                <div class="iteminfoname">下载资源</div>
              </div>
              <div class="itemmm">
                <div class="iteminfoicon"></div>
                <div class="iteminfoname">作品需求发布和管理</div>
              </div>
              <div class="itemmm">
                <div class="iteminfoicon"></div>
                <div class="iteminfoname">科普活动发布和管理</div>
              </div>
              <div class="itemmm">
                <div class="iteminfoicon"></div>
                <div class="iteminfoname">内容传播认证奖励</div>
              </div>
            </div>
          </div>
          <div class="jieitem">
            <div class="jieitemtitle">
              医普号
            </div>
            <div class="jieitemerji">
              可以对平台所创作的内容进行浏览.分享、收藏、下载，可以通过第三方渠道推广科普内容，同时也可以发布内容创作需求。
            </div>
            <div class="iteminfo">
              <div class="itemmm">
                <div class="iteminfoicon"></div>
                <div class="iteminfoname">浏览、分享、收藏</div>
              </div>
              <div class="itemmm">
                <div class="iteminfoicon"></div>
                <div class="iteminfoname">下载资源</div>
              </div>
              <div class="itemmm">
                <div class="iteminfoicon"></div>
                <div class="iteminfoname">科普内容发布和管理</div>
              </div>
              <div class="itemmm">
                <div class="iteminfoicon"></div>
                <div class="iteminfoname">科普资源上传和管理</div>
              </div>
              <div class="itemmm">
                <div class="iteminfoicon"></div>
                <div class="iteminfoname">作品扶持或奖励</div>
              </div>
              <div class="itemmm">
                <div class="iteminfoicon"></div>
                <div class="iteminfoname">原创内容创作证书</div>
              </div>
              <div class="itemmm">
                <div class="iteminfoicon"></div>
                <div class="iteminfoname">内容传播认证奖励</div>
              </div>
            </div>
          </div>
        </div>
      </div>


    </div>

    <div class="el-login-footer">
    </div>
    <div class="loginbottom"></div>

  </div>
</template>

<script>
import { getCodeImg, getcode, loginnn,registernew } from "@/api/login";
import Cookies from "js-cookie";
import { encrypt, decrypt } from '@/utils/jsencrypt'

export default {
  name: "Login",
  data() {
    const equalToPassword = (rule, value, callback) => {
      if (this.loginFormm.password !== value) {
        callback(new Error("两次输入的密码不一致"));
      } else {
        callback();
      }
    };
    return {
      navlist: [
        { name: "账号注册", id: "1" },
      ],
      computeTime: 0,
      isSmsLogin: false,

      active: "1",
      timer: null,
      codeUrl: "",
      loginForm: {
        username: "",
        password: "",
        rememberMe: false,
        code: "",
        uuid: "",
        smsCode: ""

      },
      loginFormm: {
        phoneNumber: "17637180187",
        sendType: "smsRegister",
        code: "",
        uuid: "",
        smsCode: "",
        registeredType:"registered",
        openId:""

      },
      loginRules: {
        username: [
          { required: true, trigger: "blur", message: "请输入您的账号" }
        ],
        code: [{ required: true, trigger: "change", message: "请输入验证码" }]
      },
      loginRuless: {
        code: [{ required: true, trigger: "change", message: "请输入图形验证码" }],
        phoneNumber: [
          { required: true, trigger: "blur", message: "请输入您的手机号" }
        ],
        smsCode: [{ required: true, trigger: "blur", message: "验证码不能为空" }],
        // password: [
        //   { required: true, trigger: "blur", message: "请输入您的密码" },
        //   { min: 8, max: 20, message: '用户密码长度必须介于 8 和 20 之间', trigger: 'blur' },
        //   { pattern: /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])[a-zA-Z0-9]{8,20}$/, message: '密码必须包含大小写字母和数字', trigger: 'blur' }
        // ],
        // confirmPassword: [
        //   { required: true, trigger: "blur", message: "请再次输入您的密码" },
        //   { required: true, validator: equalToPassword, trigger: "blur" }
        // ],
        // password: [
        //   { required: true, trigger: "blur", message: "请输入您的密码" }
        // ],
        // smsCode: [{ required: true, trigger: "change", message: "请输入验证码" }]
      },
      loading: false,
      loadingg: false,
      // 验证码开关
      captchaEnabled: true,
      // 注册开关
      register: true,
      redirect: undefined
    };
  },
  watch: {
    $route: {
      handler: function (route) {
        this.redirect = route.query && route.query.redirect;
      },
      immediate: true
    }
  },
  created() {
    this.getCode();
    // this.getCookie();
  },
  methods: {
    changetype(item) {
      this.active = item.id
    },
    getSmsCode() {
      if (!this.computeTime) {


        // this.$refs.loginFormm.validate(valid => {
        //   if (valid) {
            if (this.loginFormm.phoneNumber) {
              getcode(this.loginFormm).then(res => {
                if (res.code === 200) {
                  this.$message({
                    message: '验证码已发送',
                    type: 'success'
                  });
                  // this.loginForm.uuid = res.uuid;
                  this.computeTime = 60;
                  this.timer = setInterval(() => {
                    this.computeTime--;
                    if (this.computeTime <= 0) {
                      clearInterval(this.timer)
                    }
                  }, 1000);
                }

              })
            } else {
              this.$message({
                message: '请输入手机号',
                type: 'danger'
              });
            }
          // }
        // })
      }
    },
    getCode() {
      getCodeImg().then(res => {
        this.captchaEnabled = res.captchaEnabled === undefined ? true : res.captchaEnabled;
        if (this.captchaEnabled) {
          this.codeUrl = "data:image/gif;base64," + res.img;
          this.loginFormm.uuid = res.uuid;
        }
      });
    },
    getCookie() {
      const username = Cookies.get("username");
      const password = Cookies.get("password");
      const rememberMe = Cookies.get('rememberMe')
      this.loginForm = {
        username: username === undefined ? this.loginForm.username : username,
        password: password === undefined ? this.loginForm.password : decrypt(password),
        rememberMe: rememberMe === undefined ? false : Boolean(rememberMe)
      };
    },
    handleLogin() {
      this.$refs.loginForm.validate(valid => {
        if (valid) {
          this.loading = true;
          this.$store.dispatch("NewLogin", this.loginForm).then(() => {
            console.log("zoul ")
            this.$router.push({ path: this.redirect || "/" }).catch(() => { });
          }).catch(() => {
            this.loading = false;
            if (this.captchaEnabled) {
              this.getCode();
            }
          });
        }
      });
    },
    handleLoginn() {
      
      this.$refs.loginFormm.validate(valid => {
        if (valid) {
          this.$store.dispatch("zhuLogin", this.loginFormm).then(() => {
          this.$router.push({ path: this.redirect || "/" }).catch(() => {
          });
        }).catch((res) => {
            this.computeTime=0
          this.loginFormm.code=""
          this.loginFormm.smsCode=""
          this.getCode()
          clearInterval(this.timer)
        });
          // registernew(this.loginFormm).then(res=>{
          //   const phonenumber = this.loginFormm.phoneNumber;
          //   this.$alert("<font color='red'>恭喜你，您的手机号" + phonenumber + " 注册成功！</font>", '系统提示', {
          //     dangerouslyUseHTMLString: true,
          //     type: 'success',
          //     confirmButtonText:"去登录"
          //   }).then(() => {
          //     this.$router.push("/login");
          //   }).catch(() => {});
          // }).catch(() => {
          //   this.loadingg = false;
          //   this.computeTime=0
          // this.loginFormm.code=""
          // this.loginFormm.smsCode=""
          // this.getCode()
          // clearInterval(this.timer)
          // this.loadingg = false;

          // })
          // this.$store.dispatch("Login", this.loginFormm).then(() => {
          //   console.log("zoul 1111")
          //   this.$router.push({ path: this.redirect || "/" }).catch(() => {
          //   });
          // }).catch((res) => {
          //   console.log(res, "zouleshibai ")
          //   this.$router.push({ path: this.redirect || "/" }).catch(() => {
          //   });
          //   console.log("zoul 11111222")
          //   this.loadingg = false;
          //   if (this.captchaEnabled) {
          //     this.getCode();
          //   }
          // });
        }
      });

    }
    // });
    // }
  }
};
</script>

<style rel="stylesheet/scss" lang="scss">
.login {
  // display: flex;
  // justify-content: center;
  // align-items: center;
  width: 100%;
  height: 100%;
  background-image: url("../assets/images/login-background.jpg");
  background-size: cover;
  background-repeat: no-repeat;
}

.logintop {
  width: 100%;
  height: 20px;
  background: #D5A771;
}

.loginbottom {
  width: 100%;
  height: 50px;
  position: fixed;
  bottom: 0;
  background: #D5A771;
}

.login-form .el-input input {
  background-color: #F4F4F4;
  border: 1px solid #D8D8D8;
}

.loginmain {
  width: 1400px;
  height: 650px;
  background: rgba(0, 0, 0, 0.2);
  opacity: 1;
  margin: 100px auto;
  border-radius: 15px;
  display: flex;

  .loginmainl {
    width: 427px;
    height: 500px;
    background: #FFFFFF;
    border-radius: 15px 15px 15px 15px;
    margin-top: 80px;
    margin-left: 75px;
    opacity: 1;

    .loginmainltop {
      width: 90%;
      margin: 0 auto;
      margin-top: 50px;
      display: flex;

      .loginicon {
        width: 62px;
        height: 62px;

        img {
          width: 100%;
          height: 100%;
        }
      }

      .logintitle {
        font-size: 20px;
        font-family: Source Han Sans, Source Han Sans;
        font-weight: 700;
        color: #3D3D3D;
        line-height: 62px;
        margin-left: 5px;
      }
    }

    .logintype {
      width: 200px;
      display: flex;
      justify-content: space-between;
      margin-left: 25px;
      margin-top: 10px;

      .logiintypeitem {
        cursor: pointer;
        width: 65px;
        font-size: 16px;
        line-height: 40px;
        font-family: Source Han Sans, Source Han Sans;
        font-weight: 400;
        color: #999999;
      }

      .active {
        color: #000;
        border-bottom: 1px solid #000;
      }
    }
  }

  .loginmainr {
    width: 805px;
    height: 500px;
    background: #FFFFFF;
    border-radius: 15px 15px 15px 15px;
    margin-top: 80px;
    margin-left: 20px;
    opacity: 1;

    .loginmainrtop {
      text-align: center;
      font-size: 24px;
      font-family: Source Han Sans, Source Han Sans;
      font-weight: 700;
      color: #3D3D3D;
      line-height: 100px;
    }

    .jielist {
      width: 93%;
      margin: 0 auto;
      display: flex;
      justify-content: space-between;

      .jieitem {
        width: 235px;
        // height: 320px;
        padding-bottom: 15px;
        border: 1px solid #D5A771;
        border-radius: 15px;

        .jieitemtitle {
          text-align: center;
          font-size: 20px;
          font-family: Source Han Sans, Source Han Sans;
          font-weight: 700;
          color: #000000;
          line-height: 60px;
        }

        .jieitemerji {
          width: 92%;
          margin: 0 auto;
          text-align: center;
          height: 75px;
          font-size: 13px;
          font-family: Source Han Sans, Source Han Sans;
          font-weight: 400;
          color: #3D3D3D;
          line-height: 22px;

        }

        .iteminfo {
          width: 85%;
          margin: 0 auto;
          margin-top: 20px;
          overflow: hidden;

          .itemmm {
            display: flex;
            margin-top: 10px;

            .iteminfoicon {
              width: 8px;
              height: 8px;
              background: #D5A771;
              opacity: 1;
              border-radius: 50%;
              margin-top: 6px;
            }

            .iteminfoname {
              margin-left: 15px;
              font-size: 14px;
              font-family: Source Han Sans, Source Han Sans;
              font-weight: 400;
              color: #3D3D3D;
            }
          }
        }
      }
    }
  }
}

.wangji {
  width: 100%;
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  font-family: Source Han Sans, Source Han Sans;
  font-weight: 400;
  color: #999999;
  line-height: 20px;
}

.title {
  margin: 0px auto 30px auto;
  text-align: center;
  color: #707070;
}

.login-form {
  width: 90%;
  margin: 0 auto;
  margin-top: 30px;
  border-radius: 6px;
  background: #ffffff;


  .el-input {
    height: 38px;

    input {
      height: 38px;
    }
  }

  .input-icon {
    height: 39px;
    width: 14px;
    margin-left: 2px;
  }
}

.login-tip {
  font-size: 13px;
  text-align: center;
  color: #bfbfbf;
}

.login-code {
  width: 33%;
  height: 38px;
  float: right;

  img {
    cursor: pointer;
    vertical-align: middle;
  }
}

.el-login-footer {
  height: 40px;
  line-height: 40px;
  position: fixed;
  bottom: 0;
  width: 100%;
  text-align: center;
  color: #fff;
  font-family: Arial;
  font-size: 12px;
  letter-spacing: 1px;
}

.login-code-img {
  height: 38px;
}
</style>
